<template>
  <div class="channel-edit">
    <van-cell title="我的频道" :border="false">
      <van-button
        size="mini"
        round
        type="danger"
        plain
        class="edit-btn"
        @click="isShowChannelEdit = !isShowChannelEdit"
      >{{ isShowChannelEdit ? '完成' : '编辑' }}</van-button>
    </van-cell>
    <van-grid :gutter="10">
      <van-grid-item
        class="channel-item"
        v-for="(item, i) in userChannels"
        :key="item.id"
        @click="switchChannelClickhandle(item, i)"
      >
      <van-icon v-show=" isShowChannelEdit && item.name !== '推荐'" slot="text" class="clear-icon" name="clear"></van-icon>
      <span :class="{activeStyle: activeNum === i}" slot="text" class="channel-text">{{item.name}}</span>

      </van-grid-item>
    </van-grid>
    <van-cell title="频道推荐" :border="false"></van-cell>
    <van-grid :gutter="10">
      <van-grid-item
        class="channel-item"
        v-for="item in recommendChannel"
        :key="item.id"
        @click="addmyChannelhandle(item)"
      >
      <span slot="text" class="channel-text">
        <van-icon slot="text"  name="plus"></van-icon>
        {{item.name}}
      </span>
      </van-grid-item>
    </van-grid>
  </div>
</template>

<script>
import { getAllChannelList } from '@/api/article'
export default {
  name: 'ChannelEdit',
  components: {},
  props: {
    // 接收父组件当前用户拥有频道
    userChannels: {
      type: Array,
      required: true
    },
    // 接收父组件当前选中Tab栏目索引Index
    activeNum: {
      type: Number,
      required: true
    }
  },
  data () {
    return {
      // 全部频道数据
      allChannelListData: [],
      // 频道编辑状态
      isShowChannelEdit: false
    }
  },
  computed: {
    // 频道推荐 = 全部频道 - 我的频道
    recommendChannel () {
      return this.allChannelListData.filter(itemA => {
        return this.userChannels.findIndex(itemB => {
          return itemA.id === itemB.id
        }) === -1
      })
    }
  },
  watch: {},
  created () {
    this.loadAllChanneList()
  },
  mounted () {},
  methods: {
    // 获取全部频道列表请求
    async loadAllChanneList () {
      try {
        const { data } = await getAllChannelList()
        this.allChannelListData = data.data.channels
      } catch (err) {
        this.$toast.fail('数据异常，稍后重试！')
      }
    },
    // 通知父组件将新增的用户频道添加到数组中
    addmyChannelhandle (item) {
      this.$emit('addMyChannel', item)
    },
    // 处理编辑按钮, true为编辑状态, false为切换状态
    switchChannelClickhandle (item, i) {
      if (this.isShowChannelEdit) {
        // 编辑状态
        if (item.name === '推荐') return
        if (i <= this.activeNum) {
          this.$emit('toggleActive', this.activeNum - 1)
        }
        this.$emit('updateMyChannelList', [item, i])
      } else {
        // 非编辑状态i
        this.$emit('toggleActive', i)
        this.$emit('closePopup')
      }
    }
  }
}
</script>

<style scoped lang="less">
.channel-edit {
  margin-top: 90px;
  .edit-btn {
    width: 98px;
    height: 39px;
  }
  .channel-item {
    height: 86px;
    .clear-icon {
      position: absolute;
      right: -10px;
      top: -10px;
      color: #cacaca;
      font-size: 36px;
      z-index: 2;
    }
    /deep/ .van-grid-item__content {
      padding: 0;
      text-align: left;
      width: 160px;
      background-color: #f5f5f6;
      white-space: nowrap;
      .channel-text {
        vertical-align: middle;
        color: #222;
        font-size: 28px;
      }
    }
  }
}
// 激活项高亮
.activeStyle {
  color: red!important;
  font-weight: 600;
}
</style>
